<template>
    <div class="page-container">
        <a-form-model :model="form" style="margin: 50px 0 0 50px; width: 50vw;" layout="vertical">
            <a-form-model-item label="上传方式">
                <a-select v-model="form.type" placeholder="请选择导入方式">
                    <a-select-option v-for="(v, k) in uploadTypes" :key="k" :value="v.type">
                        {{ v.label }}
                    </a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="选择文件">
                <input type="file" id="input" @change="onInputChange" style="display: none;">
                <div>
                    <span v-show="form.file.name">文件名：{{ form.file.name }}</span>
                    <span v-show="form.file.size">文件大小：{{ form.file.size }}</span>
                    <span v-show="form.file.type">文件类型：{{ form.file.type }}</span>
                </div>
                <a-button @click="onChooseClick"> <a-icon type="upload" /> 选择文件 </a-button>
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" @click="onSubmit" :disabled="!!submitDisable">
                    {{ submitDisable || '上传'}}
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>
<script>
export default {
    name: 'ImportData',
    data() {return {
        form: {
            type: '',
            file: {}
        },
        uploadTypes: [
            {
                type: 'from_db',
                label: '从数据库文件 db.sqlite 导入'
            },
            // {
            //     type: 'from_hikari1',
            //     label: '从旧版本 hikari 1 导入'
            // }
        ]
    }},
    methods: {
        onSubmit() {
            
        },
        onInputChange(e) {
            console.log(e, document.getElementById('input').files)
            const file = document.getElementById('input').files[0]
            this.form.file = {
                name: file.name || '',
                size: file.size ? `${file.size / 1000} kb` : '0 b',
                type: file.type || ''
            }
        },
        onChooseClick() {
            document.getElementById('input').click()
        }
    },
    computed: {
        submitDisable() {
            switch (this.form.type) {
                case 'from_db': {
                    if (this.form.file.name !== 'db.sqlite') {
                        return '请上传文件名为 db.sqlite 的数据库文件'
                    }
                    return false
                }
                case 'from_hikari1': {
                    if (!this.form.file.name) {
                        return '请选择文件'
                    }
                    if (this.form.file.name.indexOf('.zip') == -1 || this.form.file.name.indexOf('.rar') == -1) {
                        return '请上传后缀名是 rar 或 zip 的 hikari 1 压缩包文件'
                    }
                    return false
                }
                default: {
                    return '请选择导入方式'
                }
            }
        }
    }
}
</script>
<style scoped>
.page-container {
    padding: 50px 20px;
}
</style>


